<template>
    <div v-show="isLoading" class="loading-overlay">
        <img
            :class="[type == 1 ? 'loading1' : 'loading2']"
            :src="type == 1 ? 'https://map-storage.xtt.xyz/subloading.webp' : 'https://map-storage.xtt.xyz/loading.png'"
            alt=""
        />
    </div>
</template>
<script setup>
import { defineProps } from "vue";

const props = defineProps({
    isLoading: {
        type: Boolean,
        default: false
    },
    type: {
        type: Number,
        default: 1
    }
});
</script>
<style scoped lang="less">
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;

    .loading1 {
        width: 48px;
        height: 48px;
    }

    .loading2 {
        width: 56px;
        height: 56px;
    }
}
</style>
